
function drawPic() {
  const canvas = document.getElementById('canvas')
  const width = canvas.width
  const height = canvas.height
  // 获取该canvas的2D绘图环境
  const ctx = canvas.getContext('2d')
  ctx.textBaseline = 'bottom'
  /** 绘制背景色**/
  ctx.fillStyle = randomColor(180, 240)
  // 颜色若太深可能导致看不清
  ctx.fillRect(0, 0, width, height)
  /** 绘制文字**/
  const str = 'ABCEFGHJKLMNPQRSTWXY123456789abcefghjklmnpqrstwxy'
  let code = ''
  // 生成四个验证码
  for (var i = 1; i <= 4; i++) {
    const txt = str[randomNum(0, str.length)]
    code = code + txt
    ctx.fillStyle = randomColor(50, 160)
    // 随机生成字体颜色
    ctx.font = randomNum(90, 110) + 'px SimHei'
    // 随机生成字体大小
    const x = 10 + i * 50
    const y = randomNum(100, 135)
    const deg = randomNum(-30, 30)
    // 修改坐标原点和旋转角度
    ctx.translate(x, y)
    ctx.rotate(deg * Math.PI / 180)
    ctx.fillText(txt, 0, 0)
    // 恢复坐标原点和旋转角度
    ctx.rotate(-deg * Math.PI / 180)
    ctx.translate(-x, -y)
  }

  /** 绘制干扰线**/
  for (var i = 0; i < 3; i++) {
    ctx.strokeStyle = randomColor(40, 180)
    ctx.beginPath()
    ctx.moveTo(randomNum(0, width / 2), randomNum(0, height / 2))
    ctx.lineTo(randomNum(0, width / 2), randomNum(0, height))
    ctx.stroke()
  }
  /** 绘制干扰点**/
  for (var i = 0; i < 50; i++) {
    ctx.fillStyle = randomColor(255)
    ctx.beginPath()
    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI)
    ctx.fill()
  }
  return code
}
/** 生成一个随机数**/
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
}
/** 生成一个随机色**/
function randomColor(min, max) {
  const r = randomNum(min, max)
  const g = randomNum(min, max)
  const b = randomNum(min, max)
  return 'rgb(' + r + ',' + g + ',' + b + ')'
}
export default drawPic
